Table.vue<template>
	<div>

		<el-row :gutter="20">
			<el-col :span="2">
				<el-input v-model="name" placeholder="客户名"></el-input>
			</el-col>
			<el-col :span="2">
				<el-input v-model="khno" placeholder="客户编号"></el-input>
			</el-col>
			<el-col :span="3">
				<!-- <el-input v-model="level" placeholder="等级"></el-input> -->
				<el-select v-model="value" placeholder="客户等级">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
						:disabled="item.disabled">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="2">
				<el-button type="success" round @click="initTableData">查找</el-button>
			</el-col>
		</el-row>
		<br>
		<el-row :gutter="20">
			<el-col :span="2">
				<el-button type="primary" round @click="showAddPaeg">添加用户</el-button>
			</el-col>
			<el-col :span="2">
				<el-button type="danger" round @click="deleteSomeUser">订单查看</el-button>
			</el-col>
		</el-row>
		<!--分页-->
		<el-pagination :page-size="page.pageSize" :total="page.totalCount" :current-page.sync="page.pageNo"
			@current-change="initTableData" @size-change="handleSizeChange" :page-sizes="[2, 3,4, 5, 10, 20, 30, 50]"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		<!--表格内容-->
		<el-table ref="list" :data="tableData" style="width: 100%" border stripe highlight-current-row
			:default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
			@select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center">
			</el-table-column>
			<el-table-column property="id" label="编号" width="50">
			</el-table-column>
			<el-table-column property="name" label="客户名">
			</el-table-column>
			<el-table-column property="fr" label="法人">
			</el-table-column>
			<el-table-column property="khno" label="客户编号">
			</el-table-column>
			<el-table-column property="area" label="地区">
			</el-table-column>
			<el-table-column property="cusManager" label="客户经理">
			</el-table-column>
			<el-table-column property="myd" label="满意度">
			</el-table-column>
			<el-table-column property="level" label="客户级别">
			</el-table-column>
			<el-table-column property="xyd" label="信用度">
			</el-table-column>
			<el-table-column property="address" label="详细地址">
			</el-table-column>
			<el-table-column property="postCode" label="邮编">
			</el-table-column>
			<el-table-column property="phone" label="电话">
			</el-table-column>
			<el-table-column property="webSite" label="网站">
			</el-table-column>
			<el-table-column property="fax" label="传真">
			</el-table-column>
			<el-table-column property="zczj" label="注册资金">
			</el-table-column>
			<el-table-column property="yyzzzch" label="营业执照">
			</el-table-column>
			<el-table-column property="khyh" label="开户银行">
			</el-table-column>
			<el-table-column property="khzh" label="开户账号">
			</el-table-column>
			<el-table-column property="gsdjh" label="国税">
			</el-table-column>
			<el-table-column property="dsdjh" label="地税">
			</el-table-column>
			<el-table-column property="createDate" label="创建时间">
			</el-table-column>
			<el-table-column property="updateDate" label="更新时间">
			</el-table-column>
			<el-table-column label="操作" width="130" align="center">
				<template slot-scope="scope">
					<el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
						@click="rowEdit(scope.$index, scope.row)"></el-button>
					<el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
						@click="rowDel(scope.$index, scope.row, $event);"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--编辑-弹出层-->
		<el-dialog :title="pageName" :visible.sync="isShowEditDialog" width="530px" @close="dialogClose">
			<el-form ref="editForm" :model="formFileds" label-width="75px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="用户名称" prop="name">
							<el-input v-model="formFileds.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="法人" prop="fr">
							<el-input v-model="formFileds.fr"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="区域" prop="area">
							<el-input v-model="formFileds.area"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="客户经理" prop="cusManager">
							<el-input v-model="formFileds.cusManager"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="客户级别" prop="level">
							<el-input v-model="formFileds.level"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="信用度" prop="xyd">
							<el-input v-model="formFileds.xyd"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="邮编" prop="postCode">
							<el-input v-model="formFileds.postCode"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="phone">
							<el-input v-model="formFileds.phone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="客户地址" prop="address">
							<el-input v-model="formFileds.address"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="传真" prop="fax">
							<el-input v-model="formFileds.fax"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="网站" prop="webSite">
							<el-input v-model="formFileds.webSite"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="注册资金" prop="zczj">
							<el-input v-model="formFileds.zczj"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="开户行" prop="khyh">
							<el-input v-model="formFileds.khyh"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开户账号" prop="khzh">
							<el-input v-model="formFileds.khzh"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="国税" prop="gsdjh">
							<el-input v-model="formFileds.gsdjh"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="地税" prop="dsdjh">
							<el-input v-model="formFileds.dsdjh"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button type="primary" @click="handleEdit" class="pull-right margin-l-25">确定</el-button>
					<el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "Table",
		data() {
			return {
				//弹出层数据
				formFileds: {
					name:'',
					fr:'',
					area:'',
					cusManager:'',
					level:'',
					xyd:'',
					address:'',
					postCode:'',
					phone:'',
					webSite:'',
					fax:'',
					zczj:'',
					khyh:'',
					khzh:'',
					gsdjh:'',
					dsdjh:'',
				},
				pageName: '', //弹出层名字
				tableData: [],
				roleList: [], //角色集合
				page: { //分页参数
					pageNo: 1,
					pageSize: 4,
					totalCount: 0
				},
				name: '',
				level: '',
				khno: '',
				isShowEditDialog: false,
				multipleSelection: [],
				userId: [],
				options: [{
					value: '',
					label: ''
				}, {
					value: '战略合作伙伴',
					label: '战略合作伙伴'
				}, {
					value: '大客户',
					label: '大客户',
					disabled: false
				}, {
					value: '重点开发客户',
					label: '重点开发客户'
				}],
				value: ''
			}
		},
		methods: {
			// pageSize改变时
			handleSizeChange(val) {
				this.page.pageSize = val;
				this.initPageData();
			},
			//多选
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//显示添加页面
			showAddPaeg() {
				this.isShowEditDialog = true;
				this.formFileds = {};
				this.pageName = '客户管理-添加用户';
			},

			handleRowClick(row, event, column) {
				// 仅选中当前行
				this.setCurRowChecked(row);
			},
			handleCheckedAllAndCheckedNone(selection) {
				// 当前选中仅一行时操作-（当前表格行高亮）
				1 != selection.length && this.$refs.list.setCurrentRow();
			},
			
			dialogClose() {
				// 清空编辑表单
				this.$refs.editForm.resetFields();
			},
			rowEdit(index, row) {
				this.formFileds = row
				this.isShowEditDialog = true;
				this.pageName = '客户管理-修改用户';
			},
			handleEdit() {
				this.$refs.editForm.validate(isValid => {
				  if (!isValid) return;
				  // 保存编辑后的数据
				  axios.get('http://localhost:8082/customer/save', {
				      params: this.formFileds
				    })
				    .then(res => {
				      if (res.data.code == 2000) {
				        this.isShowEditDialog = false;
				        this.$message.success('保存成功');
				        this.initTableData()
				      } else {
				        this.isShowEditDialog = false;
				        this.$message.success('保存失败');
				      }
				    })
				});
			},
			// 删除用户
			rowDel(index, row, event) {
				// 让当前删除按钮失焦
				event.target.blur();
				this.$confirm('确定要删除当前行吗？', '删除', {
					comfirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					axios.get('http://localhost:8082/customer/delById?id=' + row.id)
						.then(res => {
							if (res.data.code == 2000) {
								this.initPageData()
								this.$message.success('删除成功');
							}
						})
				});
			},
			//条件查询
			initTableData() { //初始化表数据及模糊查询
				var url = "http://localhost:8082/customer/getPage?name=" + this.name + "&level=" + this.value +
					"&khno=" + this.khno + "&pageNo=" + this.page.pageNo + "&pageSize=" + this.page.pageSize
				axios.get(url)
					.then(res => {
						if (res.data.code == 2000) {
							this.page.totalCount = res.data.data.total
							this.tableData = res.data.data.list
						}
					})
			},

			//初始化角色数据
			initPageData() {
				axios.get('http://localhost:8082/customer/getPage', {
						params: this.page
					})
					.then(res => {
						this.tableData = res.data.data.list
						this.page.totalCount = res.data.data.total
					})
			},
			//批量删除
			// deleteSomeUser() {
			// 	for (var i = 0; i < this.multipleSelection.length; i++) {
			// 		this.userId.push(this.multipleSelection[i].id)
			// 	}
			// 	axios.get('http://localhost:8081/user/deleteSomeUser?userId=' + this.userId)
			// 		.then(res => {
			// 			if (res.data.code == 2000) {
			// 				this.initTableData();
			// 				this.$message.success('删除成功');
			// 			}
			// 		})
			// },
			// 选中当前行-当前行的复选框被勾选
			// setCurRowChecked(row) {
			// 	this.$refs.list.clearSelection();
			// 	this.$refs.list.toggleRowSelection(row);
			// }
		},
		mounted() {
			// this.initTableData()
			this.initPageData()
		}
	}
</script>

<style scoped lang="less">
	.el-form {
		padding: 0 10px;
	}

	.el-date-editor {
		width: 100% !important;
	}
</style>
